﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" x-bind="load-library: 'Window'">
	<head>
		<title x-bind="text: Title">Page Title</title>

		<script src="App_ClientScripts/jquery-1.10.2.min.js" type="text/javascript"></script>
		<script src="App_ClientScripts/knockout-3.0.0.js" type="text/javascript"></script>
		<script src="App_ClientScripts/knockout.mapping-latest.js" type="text/javascript"></script>
		<script src="App_ClientScripts/extensions.js" type="text/javascript"></script>
		<script src="App_ClientScripts/app.js" type="text/javascript"></script>

	</head>
	<body x-bind="style: { backgroundColor: BackgroundColor }, load-library: 'Page'">
		<div x-bind="load-template: { name: Template }"></div>
		<span x-bind="with: ViewModel" style="position:absolute; right:5px; top:5px; border: dashed 1px gray; background-color:white; padding:10px;" >
			<select x-bind="options: Model, value: SelectedElement, optionsText: function (item) { return item.Metadata().TypeName() + ((item.Title) ? ' - ' + item.Title() : ''); }"></select>
			<div x-bind="with: SelectedElement">
				<table x-bind="foreach: { data: Metadata().Properties() }">
					<tr>
						<td x-bind="text: Title + ':'" style="text-align:right; width: 80px"></td>
						<td style="width:200px" x-bind="load-template: { name: Template }"></td>
					</tr>
				</table>
			</div>
		</span>
	</body>
</html>